{% extends 'log_reg_base.html' %}
{% load staticfiles %}
{% block title %}
    找回密码
{% endblock %}
{% block js_css %}
    <link rel="stylesheet" href={% static "css/find_pwd.css" %}>
{% endblock %}
{% block base_body %}
    <div class="wrapper">
        <img src={% static "media/registerLogo.png" %} alt="" class="logo">

            {% csrf_token %}
            <div class="form-group">
                <input type="text" class="form-control" id="mail" name="mail" placeholder="请输入邮箱">
                <label for="name"></label>
            </div>

            <div class="form-group ">
                <div class="input-group">
                    <input type="text" class="form-control" id="secret" name="verify" placeholder="密钥将会发送到你的邮箱请注意查收">
                    <span class="input-group-addon" style="display: block; line-height: 45px;"><input type="button"
                                                                                                      value="点击获取"
                                                                                                      id="get_key"></span>
                    <label for="name"></label>
                </div>
            </div>

            <div class="form-group">
                <input type="password" class="form-control" id="pwd" name="pwd" placeholder="请输入密码">
                <label for="name"></label>
            </div>
            <div class="form-group">
                <input type="password" class="form-control" id="repwd" name="repwd" placeholder="请重新输入密码">
                <label for="name"></label>
            </div>
            <button type="submit" class="btn btn-lg btn-block register ">确认修改</button>

    </div>

{% endblock %}

{% block bottom_js %}
    <script>
        $(function () {
            var mail = false;
            var secret = false;
            var pwd = false;
            var mai = $('#mail');
            var sec = $('#secret');
            var p = $('#pwd');
            var repwd = false;
            var rep = $('#repwd');
            var get_key = $('#get_key');
            var timer = null;
            var sub = $('.register');
            if (mai.val() == '') {
                get_key.attr('disabled', true);
            }
            get_key.click(function () {
                this.disabled = true;
                timing = function timing(sec) {
                    get_key.val(sec + '后重新获取');
                    if (--sec < 0) {
                        clearTimeout(timer);
                        get_key.val('点击获取');
                        get_key.attr('disabled', false);
                        CheckMail();
                    } else {
                        timer = setTimeout('timing(' + sec + ')', 1000);
                    }
                };
                timing(10);
                $.post('{% url "user:secret" %}', {'mail': mai.val()})
            });


            function CheckRepwd() {
                if (rep.val() == '') {
                    rep.next().html('密码不能为空');
                    rep.next().show();
                    repwd = true;
                } else if (rep.val() != p.val()) {
                    rep.next().html('密码不一致');
                    rep.next().show();
                    repwd = true;
                } else {
                    repwd = false
                }
            }

            function CheckMail() {
                var re = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                if (mai.val() == '') {
                    mai.next().html('邮箱不能为空');
                    get_key.attr('disabled', true);
                    mai.next().show();
                    mail = true;
                } else if (!re.test(mai.val())) {
                    mai.next().html('邮箱格式不正确');
                    mai.next().show();
                    get_key.attr('disabled', true);

                    mail = true;
                } else {
                    mail = false
                    get_key.attr('disabled', false);

                }

            }

            function CheckSecret() {
                if (sec.val() == '') {
                    sec.siblings('label').html('验证码必须输入');
                    sec.siblings('label').show();
                    secret = true;
                } else {
                    secret = false
                }
            }

            function Checkpwd() {
                var re = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
                if (p.val() == '') {
                    p.next().html('密码不能为空');
                    p.next().show();
                    pwd = true;
                } else if (!re.test(p.val())) {
                    p.next().html('密码长度要大于6位，由数字和字母组成');
                    p.next().show();
                    pwd = true;
                } else {
                    pwd = false
                }
            }


            mai.focus(function () {
                $(this).next().html('');
            });

            mai.blur(function () {
                CheckMail();
            });

            sec.focus(function () {
                $(this).siblings('label').html('');
            });

            sec.blur(function () {
                CheckSecret();
            });

            p.focus(function () {
                $(this).next().html('');
            });

            p.blur(function () {
                Checkpwd();
            });

            rep.focus(function () {
                $(this).next().html('');
            });

            rep.blur(function () {
                CheckRepwd();
            });

            sub.click(function () {
                CheckMail();
                Checkpwd();
                CheckSecret();
                CheckRepwd();
                if (mail == false && secret == false && pwd == false && repwd == false) {
                    $.ajax({
                        url: '{% url "user:ajax_find" %}',
                        type: 'post',
                        data: {'mail': mai.val(), 'secret': sec.val(), 'pwd': p.val(), 'repwd': rep.val()},
                        success:function(data){
                            if(data.err != ''){
                                alert(data.err)
                            }
                        }
                    });
                }
            })
        })
    </script>
{% endblock %}


